<template>
  <el-button :loading="downloadLoading" type="warning" plain :icon="Download" @click="click" v-bind="$attrs">
    <slot>导出</slot>
  </el-button>
</template>

<script>
import { Download } from '@element-plus/icons-vue'
// import request from '@/utils/request'
// import { formatData } from '@/components/CrudTable/utils'
export default {
  name: 'myExcelExport',
  setup() {
    return {
      Download,
    }
  },
  props: {
    tableHead: {
      type: Array,
      default() {
        return []
      },
    },
    tableList: {
      type: Array,
      default() {
        return []
      },
    },
    fileName: {
      type: String,
      default: 'table_data',
    },
    wsName: {
      type: String,
      default: 'Sheet1',
    },
    url: {
      type: Object || String,
      default() {
        return {}
      },
    },
    debug: Boolean,
  },
  data() {
    return {
      downloadLoading: false,
    }
  },
  methods: {
    click() {
      const { typeUrl } = this.url
      if ((typeUrl || this.url) === 'excelexport') {
        this.handleDownload()
      } else {
        this.$emit('click', { doExport: this.extraDownload })
      }
    },
    handleDownload() {
      const { tableHead: dynamicMulti, tableList: dynamicData, fileName, wsName } = this
      this.downloadLoading = true
      import('./Export2Excel')
        .then(excel => {
          excel.export_json_to_dynamicexcel({
            dynamicMulti,
            dynamicData,
            fileName,
            wsName,
          })
          this.downloadLoading = false
        })
        .finally(() => (this.downloadLoading = false))
    },
    async extraDownload(form = {}, formatter) {
      let notice = null
      try {
        await this.$confirm('确定导出数据吗？', '系统提示', {
          type: 'info',
        })
        this.downloadLoading = true
        notice = this.$notify({
          iconClass: 'el-icon-loading',
          title: '导出提示',
          showClose: false,
          position: 'bottom-right',
          offset: 80,
          duration: 0,
          message: '数据导出中,请稍后……',
        })
        const postData = formatData(form, formatter, true)
        const reqBody = {
          method: 'post',
          responseType: 'blob',
        }
        const { fileName = '导出信息', params, ...args } = this.config
        if (params) Object.assign(postData, params)
        Object.assign(reqBody, args)
        if (args.method && args.method === 'get') reqBody.params = postData
        else reqBody.data = postData

        if (this.debug) return console.log(reqBody)

        const binaryData = await request(reqBody)
        const blob = new Blob([binaryData], { type: 'application/octet-stream' })
        if ('download' in document.createElement('a')) {
          const downloadElement = document.createElement('a')
          const href = window.URL.createObjectURL(blob) // 创建下载的链接
          downloadElement.href = href
          downloadElement.download = fileName + '.xls' // 下载后文件名
          document.body.appendChild(downloadElement)
          downloadElement.click() // 点击下载
          document.body.removeChild(downloadElement) // 下载完成移除元素
          window.URL.revokeObjectURL(href) // 释放掉blob对象
        } else {
          navigator.msSaveBlob(blob, fileName + '.xlsx')
        }
      } catch (error) {
        console.info('Export【catch】', error)
      } finally {
        this.downloadLoading = false
        if (notice != null) notice.close()
      }
    },
  },
}
</script>

<style scoped>
</style>
